<script setup lang="ts">
import { missingStatusTextMap } from "@/common/map";
import Card from "@/components/Card/index.vue";
import { textValue } from "@/utils/index";

const uiConfig = {
	labelSpan: 6,
	valueSpan: 18,
};

const props = defineProps<{
	data;
}>();

const handleEdit = (id) => {
	uni.navigateTo({ url: `/pages/missingRegister/index?id=${id}&type=edit` });
};

const handleDeal = (id) => {
	uni.navigateTo({ url: `/pages/missingDetail/index?id=${id}&type=deal` });
};

const handleCheck = (id) => {
	uni.navigateTo({ url: `/pages/missingDetail/index?id=${id}&type=check` });
};
</script>

<template>
	<Card class="storage-card-container">
		<wd-row class="row">
			<wd-col :span="uiConfig.labelSpan">主单号</wd-col>
			<wd-col class="ellipsis-2" :span="uiConfig.valueSpan">{{
				textValue(props.data?.mainOrderNumber)
			}}</wd-col>
		</wd-row>
		<wd-row class="row">
			<wd-col :span="uiConfig.labelSpan">缺件总数</wd-col>
			<wd-col class="ellipsis-2" :span="uiConfig.valueSpan">{{
				textValue(props.data?.lackQuantity)
			}}</wd-col>
		</wd-row>
		<wd-row class="row">
			<wd-col :span="uiConfig.labelSpan">缺件状态</wd-col>
			<wd-col class="ellipsis-2" :span="uiConfig.valueSpan">{{
				textValue(missingStatusTextMap[props.data?.lackStatus])
			}}</wd-col>
		</wd-row>

		<view class="button-group">
			<template v-if="props.data?.lackStatus === 'WAIT_PROCESS'">
				<wd-button @click="() => handleEdit(props.data?.id)" :round="false">
					编辑
				</wd-button>
				<wd-button @click="() => handleDeal(props.data?.id)" :round="false">
					前往处理
				</wd-button>
			</template>
			<template v-if="props.data?.lackStatus === 'FINISH_PROCESS'">
				<wd-button :round="false" @click="() => handleCheck(props.data?.id)">
					查看
				</wd-button>
			</template>
		</view>
	</Card>
</template>

<style lang="less" scoped>
@import url("../style/card.less");
@import url("../style/row.less");

.button-group {
	display: flex;
	justify-content: flex-end;

	.wd-button {
		margin: 0;
		width: 200px;

		&:not(:last-child) {
			margin-right: 20px;
		}
	}
}
</style>
